<template>
  <div id="app">
    <!--toggle right bar-->
    <input type="checkbox" id="menu" checked>
    <label for="menu" class="menu">
      <span></span>
      <span></span>
      <span></span>
    </label>
    <!--地图-->
    <div class="amap-wrapper">
      <AmapPoint @showPoint="showPoint" @hidePoint="hidePoint" @loadedPoint="loadedPoint" />
    </div>
    <!--头部区域-->
    <Header />
    <!--右侧区域-->
    <div class="rightBar">
      <!-- 回收品类总量 -->
      <div class="component-title">
        回收品类总量
        <p class="color-light">单位:吨</p>
      </div>
      <div class="pie-container">
        <Pie 
          class="pie"
          componentId="myChart1" 
          :classifyNames="classifyNames1"
          :classifyNums="classifyNums1"
          :componentStyle="style1" 
          v-if="barDataComplete1"
        />
        <div class="table">
          <table cellpadding="0" cellspacing="0">
            <thead>
              <tr>
                <td>资源分类</td>
                <td>回收数量</td>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in classifyNums1" :key="index">
                <td class="name"><i :style="'background-color: '+colors[index]"></i>{{item.name}}</td>
                <td>{{item.value}}吨</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <!-- 历史回收总量 -->
      <div class="component-title">
        历史回收总量
        <p class="color-light">单位:吨</p>
      </div>
      <Bar 
        class="bar"
        componentId="myChart2" 
        :classifyNames="classifyNames2"
        :classifyNums="classifyNums2"
        :componentStyle="style2" 
        v-if="barDataComplete2"
      />
      <!-- 今日资源回收量 -->
      <div class="component-title">
        今日资源回收量
        <p class="color-light">单位:吨</p>
      </div>
      <div class="pie-container">
        <Pie 
          class="pie"
          componentId="myChart5" 
          :classifyNames="classifyNames5"
          :classifyNums="classifyNums5"
          :componentStyle="style5" 
          v-if="barDataComplete5"
        />
        <div class="table">
          <table cellpadding="0" cellspacing="0">
            <thead>
              <tr>
                <td>资源分类</td>
                <td>回收数量</td>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in classifyNums5" :key="index">
                <td class="name"><i :style="'background-color: '+colors[index]"></i>{{item.name}}</td>
                <td>{{item.value}}吨</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <!--点击弹出层-->
    <div class="point-show" :class="{pointshow: pointShow}">
      <div class="item">
        <span>{{pointData.bus_type_name}}</span> 
        <em class="point-name" :class="'point-type'+pointData.bus_type">{{pointData.recycle_bin_name}}</em>
      </div>
      <div class="item"><span>地址</span> <em>{{pointData.user_address}}</em></div>
      <div class="item"><span>营业时间</span> <em>{{pointData.bus_time}}</em></div>
      <div class="item"><span>状态</span> <em>{{pointData.full_warehouse}}</em></div>
      <div class="item"><span>今日总量</span> <em>{{pointData.today_recycle}}公斤</em></div>
      <div class="item"><span>历史回收总量</span> <em>{{pointData.total}}公斤</em></div>
      <div class="item"><span>饮料瓶</span> <em>{{parseInt(pointData.bottle)}}个</em></div>
      <!--回收品类-->
      <div class="item" v-show="barDataComplete3">回收品类</div>
      <div class="unit" v-show="barDataComplete3">
        <p class="color-light">单位:公斤</p>
      </div>
      <div class="pie-container" v-show="barDataComplete3">
        <Pie 
          class="pie"
          componentId="myChart3" 
          :classifyNames="classifyNames3"
          :classifyNums="classifyNums3"
          :componentStyle="style3" 
          v-if="barDataComplete3"
        />
        <div class="table">
          <table cellpadding="0" cellspacing="0">
            <thead>
              <tr>
                <td>资源分类</td>
                <td>回收数量</td>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in classifyNums3" :key="index">
                <td class="name"><i :style="'background-color: '+colors[index]"></i>{{item.name}}</td>
                <td>{{item.value}}公斤</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <!--历史回收月度统计-->
      <div class="item" v-show="barDataComplete4">历史回收月度统计</div>
      <div class="unit" v-show="barDataComplete4">
        <p class="color-light">单位:公斤</p>
      </div>
      <Bar 
        class="bar"
        componentId="myChart4" 
        :classifyNames="classifyNames4"
        :classifyNums="classifyNums4"
        :componentStyle="style4" 
        v-if="barDataComplete4"
      />
    </div>
    <!--标记说明-->
    <div class="tips">
      <div class="item">
        <i class="i1"></i>
        <span>自助机( {{pointNums.pointNum1}} )</span>
      </div>
      <div class="item">
        <i class="i2"></i>
        <span>暂存点( {{pointNums.pointNum0}} )</span>
      </div>
      <div class="item">
        <i class="i3"></i>
        <span>流动回收( {{pointNums.pointNum2}} )</span>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import Header from './components/Header.vue'
import Bar from './components/BarNormal.vue'
import Pie from './components/PieNormal.vue'
import AmapPoint from './components/AmapPoint.vue'

export default {
  name: 'app',
  components: {
    Header,
    Bar,
    Pie,
    AmapPoint,
  },
  data(){
    return {
      // bar style
      style1: 'width:250px;height:250px',
      style2: 'width:400px;height:250px',
      style3: 'width:250px;height:250px',
      style4: 'width:400px;height:200px',
      style5: 'width:250px;height:250px',
      // bar 1
      barDataComplete1: false, // wait async axios
      classifyNames1: [],
      classifyNums1: [],
      // bar 2
      barDataComplete2: false, // wait async axios
      classifyNames2: [],
      classifyNums2: [],
      // bar 3
      barDataComplete3: false, // wait async axios
      classifyNames3: [],
      classifyNums3: [],
      // bar 4
      barDataComplete4: false, // wait async axios
      classifyNames4: [],
      classifyNums4: [],
      // bar 5
      barDataComplete5: false, // wait async axios
      classifyNames5: [],
      classifyNums5: [],
      // bar colors
      colors: [
        '#FFEEAD',
        '#B87D95',
        '#FCB5BB',
        '#96CEB4',
        '#FF6F69',
        '#00bbfb',
        '#FFF6F6',
        '#C5E2F6',
        '#99E0E7',
        '#C1BBA8',
      ],
      // point show
      pointShow: false,
      pointData: {},
      pointNums: {
        pointNum0: 0,
        pointNum1: 0,
        pointNum2: 0,
      }
    }
  },
  methods: {
    // 公共方法获取柱状图数据
    getBarData(barIndex, api, name, colorIndex){
      let colorNum = 0
      axios({
        method: 'post',
        url: '/api/dataWall/' + api,
      }).then((res)=>{
        let result = res.data
        console.log(result)
        this['barDataComplete'+barIndex] = false
        this['classifyNames'+barIndex] = []
        this['classifyNums'+barIndex] = []
        if(!result.length){
          return false
        }
        result.forEach((item, index)=>{
          if(!colorIndex){
            colorNum = index
          } else {
            colorNum = colorIndex
          }
          this['classifyNames'+barIndex].push(item[name])
          this['classifyNums'+barIndex].push(
            {
              name: item[name],
              value: item.num,
              itemStyle:{
                color: this.colors[colorNum]
              }
            }
          )
        })
        setTimeout(()=>{
          this['barDataComplete'+barIndex] = true
        },0)
      })
    },
    // 获取设备点的详细展示数据
    getPointData(id){
      axios({
        method: 'post',
        url: '/api/dataWall/findAllStoragePoint?id='+id
      }).then((res)=>{
        let result = res.data[0]
        this.pointData = result
        this.getPointWeight(id)
      })
    },
    getPointWeight(id){
      // 获取单点回收品类数据
      this.getBarData('3', 'findAlltotalRecycledCategory?id='+id, 'classify_name')
      // 获取单点历史回收月度统计数据
      this.getBarData('4', 'findAlltotalHistoricalRecovery?id='+id, 'gmt_create', 3)
    },
    showPoint(data){
      this.pointShow = true
      this.getPointData(data)
    },
    hidePoint(){
      if(this.pointShow === true)
        this.pointShow = false
    },
    loadedPoint(data){
      this.pointNums = data
    },
    // 获取回收品类总量数据
    getTotalCategory(){
      this.getBarData('1', 'findAlltotalRecycledCategoryPai', 'classify_name')
    },
    // 获取历史回收总量数据
    getTotalHistory(){
      this.getBarData('2', 'findAlltotalHistoricalRecovery', 'gmt_create', 3)
    },
    // 获取今日资源回收量
    getTodayCategory(){
      this.getBarData('5', 'findTodayRecycledCategoryPai', 'classify_name')
    }
  },
  mounted(){
    // 获取回收品类总量数据
    this.getTotalCategory()
    setInterval(this.getTotalCategory, this.$IntervalSeconds)
    // 获取历史回收总量数据
    this.getTotalHistory()
    setInterval(this.getTotalHistory, this.$IntervalSeconds)
    // 获取今日资源回收量
    this.getTodayCategory()
    setInterval(this.getTodayCategory, this.$IntervalSeconds)
  }
}
</script>

<style lang="stylus">
html,body
  height 100%
#app 
  font-family 'Avenir', Helvetica, Arial, sans-serif
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
  text-align center
  color #ffffff
.amap-wrapper 
  position fixed
  top 0
  left 0
  right 0
  bottom 0
  z-index 1
.rightBar
  position fixed
  top 80px
  right 0
  bottom 0
  width 400px
  padding-top 10px
  background-color rgba(4,37,49,.9)
  z-index 2
  overflow auto
  @media (max-width: 750px)
    width 300px
.component-title
  text-align left
  padding-left 10px
  padding-top 30px
  background url('./assets/images/titlebg.gif') 286px 18px no-repeat
  background-size auto 70%
  border-bottom 1px solid rgba(255, 255, 255, .2)
.unit{
  padding-left 10px
}
.bar
  padding-top 15px
.color-light
  font-size 12px
  color rgba(255, 255, 255, .7)
  margin 20px 0 -25px 0
.point-show
  animation slide-out-left 1s
  animation-fill-mode forwards
  text-align left
  padding-top 5px
  position fixed
  left -500px
  top 90px
  bottom 10px
  width 400px
  background-color rgba(4,37,49,.95)
  z-index 3
  @media (max-width: 750px)
    width 300px
  .item
    display flex
    justify-content space-between
    vertical-align center
    text-align left
    margin 0 10px
    font-size 14px
    padding 8px 0
    border-bottom 1px solid rgba(255,255,255,.1)
    &:first-child
      padding 12px 0
    em
      font-style normal
    .point-name
      color #fff041
      font-size 16px
    .point-type0
      color #fb315c
    .point-type1
      color #CCC842
    .point-type2
      color #00bbfb
.pie-container
  position relative
  .pie
    padding-top 10px
    @media (max-width: 750px)
      display none
  .table
    position absolute
    right 15px
    top 10px
    width 140px
    height 220px
    font-size 14px
    text-align center
    @media (max-width: 750px)
      position static 
      width 100%
      padding 10px
      box-sizing border-box
    table
      width 100%
      border none
      background-color #1a3c47
      thead
        tr
          background-color #072028
          td
            padding 8px 0
      tr:nth-child(even)
        background-color #0d313c
      td
        font-size 12px
        color rgba(255, 255, 255, .7)
        border none
        padding 8px 0
      .name
        text-align left
        padding-left 8px
        i
          display inline-block
          width 5px
          height 5px
          border-radius 50%
          margin-right 5px
.pointshow
  animation slide-in-left .8s
  animation-fill-mode forwards
.tips
  display flex
  justify-content space-around
  align-items center
  position fixed
  bottom 20px
  left 50%
  width 250px
  padding 0 10px
  margin-left -230px
  height 30px
  border-radius 15px
  text-align center
  background-color rgba(0, 0, 0, .5)
  z-index 9999
  @media (max-width: 750px)
    margin-left -135px
  .item
    font-size 12px
    text-align left
    padding 3px 0
    i
      display inline-block
      width 7px
      height 7px
      border-radius 50%
      margin-right 4px
    .i1
      background-color #CCC842
    .i2
      background-color #fb315c
    .i3
      background-color #00bbfb
@keyframes slide-in-left
  0%
    left -500px
  50%
    left 20px
  65%
    left 9px
  100%
    left 10px
@keyframes slide-out-left
  0%
    left 10px
  10%
    left 20px
  20%
    left 0px
  100%
    left -500px
@keyframes slide-in-right
  0%
    right -400px
  100%
    right 0
@keyframes slide-out-right
  0%
    right 0
  100%
    right -400px

/*toggle right bar*/
.menu
  position fixed
  top 85px
  right 15px
  display flex
  align-items center
  justify-content center
  flex-direction column
  width 40px
  height 40px
  background-color rgba(255, 255, 255, .75)
  border-radius 50%
  transition transform 250ms ease
  cursor pointer
  z-index 200
  span
    position relative
    display block
    width 50%
    height 2px
    background-color #444
    float left
    transform-origin center center
    transition transform 250ms ease
    z-index 200
    &:nth-of-type(1)
      transform translateY(-5px)
    &:nth-of-type(3)
      transform translateY(5px)
#menu
  display none
  &:checked ~ .menu
    background-color transparent
    transform rotate(360deg)
    transition transform 250ms ease
    span
      background-color rgba(255, 255, 255, .75)
      transition transform 250ms ease
      &:nth-of-type(1)
        transform translateY(1px) rotate(45deg)
      &:nth-of-type(2)
        display none
      &:nth-of-type(3)
        transform translateY(-1px) rotate(-45deg)
  &:checked ~ .rightBar
    transform translateX(0px)
    transition transform 500ms ease
  ~ .rightBar  
    transform translateX(400px)
    transition transform 500ms ease
</style>
